<template>
  <div>
    <div id="map"></div>
  </div>
</template>
<script>
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import { fromLonLat } from 'ol/proj.js';
import BingMaps from 'ol/source/BingMaps.js';



export default {
  data () {
    return {};
  },
  mounted () {
    var key = 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5';

    var roads = new TileLayer({
      source: new BingMaps({ key: key, imagerySet: 'Road' })
    });

    var imagery = new TileLayer({
      source: new BingMaps({ key: key, imagerySet: 'Aerial' })
    });
    var container = document.getElementById('map');
    var map = new Map({
      layers: [roads, imagery],
      target: container,
      view: new View({
        center: fromLonLat([-109, 46.5]),
        zoom: 6
      })
    });

    var radius = 75;

    var radius = 75;
    document.addEventListener('keydown', function (evt) {
      if (evt.which === 38) {
        radius = Math.min(radius + 5, 150);
        map.render();
        evt.preventDefault();
      } else if (evt.which === 40) {
        radius = Math.max(radius - 5, 25);
        map.render();
        evt.preventDefault();
      }
    });
    // get the pixel position with every move
    var mousePosition = null;

    container.addEventListener('mousemove', function (event) {
      mousePosition = map.getEventPixel(event);
      map.render();
    });

    container.addEventListener('mouseout', function () {
      mousePosition = null;
      map.render();
    });
    // before rendering the layer, do some clipping

    imagery.on('precompose', function (event) {
      var ctx = event.context;
      var pixelRatio = event.frameState.pixelRatio;
      ctx.save();
      ctx.beginPath();
      if (mousePosition) {
        // only show a circle around the mouse
        ctx.arc(mousePosition[0] * pixelRatio, mousePosition[1] * pixelRatio,
          radius * pixelRatio, 0, 2 * Math.PI);
        ctx.lineWidth = 5 * pixelRatio;
        ctx.strokeStyle = 'rgba(0,0,0,0.5)';
        ctx.stroke();
      }
      ctx.clip();
    });

    // after rendering the layer, restore the canvas context
    imagery.on('postcompose', function (event) {
      var ctx = event.context;
      ctx.restore();
    });

  }
}
</script>
<style lang="scss" scoped type="text/css">
#map {
  height: 800px;
}
.ol-popup {
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 280px;
  &:after,
  &:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  &:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
  }
  &:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
  }
}
.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
  &:after {
    content: "✖";
  }
}
</style>